import { h, reactive } from 'vue';
import type { FormRules } from 'element-plus';
import { ElTag } from 'element-plus';
import { $t } from '@/plugins/i18n';

/**
 * 获取案例状态标签样式和文本
 * @param status 状态码：0-草稿，1-审核中，2-已发布，3-审核未通过
 * @param textOnly 是否只返回文本
 */
export const getCaseStatus = (status: number, textOnly: boolean = false): any => {
  switch (status) {
    case 0:
      return textOnly ? '草稿' : 'info';
    case 1:
      return textOnly ? '审核中' : 'warning';
    case 2:
      return textOnly ? '已发布' : 'success';
    case 3:
      return textOnly ? '审核未通过' : 'danger';
    default:
      return textOnly ? '未知' : '';
  }
};

/**
 * 获取案例难度标签样式和文本
 * @param difficulty 难度等级：1-简单，2-中等，3-困难
 * @param textOnly 是否只返回文本
 */
export const getCaseDifficulty = (difficulty: number, textOnly: boolean = false): any => {
  switch (difficulty) {
    case 1:
      return textOnly ? '简单' : 'success';
    case 2:
      return textOnly ? '中等' : 'warning';
    case 3:
      return textOnly ? '困难' : 'danger';
    default:
      return textOnly ? '未知' : '';
  }
};

/**
 * 表格列定义
 */
export const columns = [
  {
    label: '案例封面',
    prop: 'cover',
    width: 100,
    cellRenderer: ({ row }) => (
      <div class="w-[80px] h-[80px] overflow-hidden rounded">
        <img src={row.cover} alt={row.description} class="w-full h-full object-cover" />
      </div>
    ),
  },
  {
    label: '案例描述',
    prop: 'description',
    minWidth: 200,
  },
  {
    label: '案例类型',
    prop: 'type',
    width: 140,
  },
  {
    label: '案例难度',
    prop: 'difficulty',
    width: 120,
    cellRenderer: ({ row }) => (
      <ElTag type={getCaseDifficulty(row.difficulty)} effect="light">
        {getCaseDifficulty(row.difficulty, true)}
      </ElTag>
    ),
  },
  {
    label: '案例状态',
    prop: 'status',
    width: 120,
    cellRenderer: ({ row }) => (
      <ElTag type={getCaseStatus(row.status)} effect="light">
        {getCaseStatus(row.status, true)}
      </ElTag>
    ),
  },
  {
    label: '创建时间',
    prop: 'createTime',
    width: 180,
    sortable: true,
  },
  {
    label: '更新时间',
    prop: 'updateTime',
    width: 180,
    sortable: true,
  },
  {
    label: '操作',
    fixed: 'right',
    width: 260,
    slot: 'operation',
  },
];

/**
 * 表单校验规则
 */
export const formRules = reactive<FormRules>({
  description: [
    { required: true, message: '请输入案例描述', trigger: 'blur' },
  ],
  cover: [
    { required: true, message: '请上传案例封面', trigger: 'change' },
  ],
  type: [
    { required: true, message: '请选择案例类型', trigger: 'change' },
  ],
  difficulty: [
    { required: true, message: '请选择案例难度', trigger: 'change' },
  ],
}); 